<link rel="stylesheet" href="lib/bootstrap-switch/3.0.1/css/bootstrap2/bootstrap-switch.css"/>

<div class="panel panel-default search-panel">
    <div class="panel-body">
        <div class="pull-left">
            <form class="form-inline">
                <div class="form-group">
                    <label class="sr-only" for="query_name">集合名称</label>
                    <input type="text" ng-model="query_name" id="query_name" class="form-control" placeholder="滤词名称" />
                </div>
                <button type="submit" class="btn btn-default" ng-click="query()">查找</button>
            </form>
        </div>
        <div class="pull-right">
            <button type="button" class="btn btn-primary" ng-click="edit()">
                创建集合
                <span class="glyphicon glyphicon-plus-sign"></span>
            </button>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

<table class="table table-striped table-bordered table-hover">
    <tr>
        <th>集合名称</th>
        <th>状态</th>
        <th>配置文件</th>
        <th>主键</th>
        <th>文档数</th>
        <th>允许提交/允许回滚</th>
        <th>最大start/最大limit</th>
        <th>描述</th>
        <th style="width: 350px;">操作</th>
    </tr>
    <tr ng-repeat="collection in paged.list">
        <td>{{ collection.name }}</td>
        <td>
            <span class="label label-success" ng-show="collection.available">有效</span>
            <span class="label label-danger" ng-show="!collection.available">无效</span>
        </td>
        <td>{{ collection.config }}</td>
        <td>{{ collection.uniqueKey }}</td>
        <td>{{ docsMap[collection.id] }}</td>
        <td>{{ collection.allowCommit == null ? false : collection.allowCommit }} / {{ collection.allowRollback == null ? false : collection.allowRollback }}</td>
        <td>{{ collection.maxStart }} / {{ collection.maxLimit }}</td>
        <td>{{ collection.remark }}</td>
        <td>
            <button type="button" class="btn btn-primary" ng-click="edit(collection)">修改</button>
            <button type="button" class="btn btn-primary" ng-click="confirmOptimize(collection)">优化</button>
            <button type="button" class="btn btn-primary" ng-click="confirmReload(collection)">重载配置</button>
            <button type="button" class="btn btn-danger" ng-click="confirmRemove(collection)">删除</button>
        </td>
    </tr>
</table>
<div>
    <div ng-include="'app/common/view/paged.html'"></div>
    <div class="clearfix"></div>
</div>

<!-- edit dialog -->
<div class="modal fade" id="editDialog" tabindex="-1">
    <div class="modal-dialog" style="width: 800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">创建集合</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger" ng-show="save_err">{{ save_errMsg }}</div>
                <form class="form-horizontal" role="form" id="editForm">
                    <div class="form-group hidden">
                        <label for="save_id" class="col-sm-2 control-label">id</label>
                        <div class="col-sm-9">
                            <input type="hidden" class="form-control" id="save_id" ng-model="save_id" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="save_name" class="col-sm-2 control-label" ng-class="{'has-error': save_name_err}">集合名称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="save_name" ng-model="save_name" style="width: 50%;" ng-disabled="save_id != null" placeholder="集合名称" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="save_config" class="col-sm-2 control-label">配置文件</label>
                        <div class="col-sm-9">
                            <select class="form-control" ng-model="save_config" id="save_config" ng-disabled="save_id != null"  style="width: 50%;">
                                <option ng-repeat="config in configs" value="{{ config.path }}" ng-selected="collection.config == config.path">{{ config.relativePath }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="save_allowCommit" class="col-sm-2 control-label">允许提交</label>
                        <div class="col-sm-9">
                            <div class="switch switch-small">
                                <input type="checkbox" ng-model="save_allowCommit" id="save_allowCommit" ng-checked="collection.allowCommit" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="save_allowRollback" class="col-sm-2 control-label">允许回滚</label>
                        <div class="col-sm-9">
                            <div class="switch switch-small">
                                <input type="checkbox" ng-model="save_allowRollback" id="save_allowRollback" ng-checked="collection.allowRollback" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="save_allowRollback" class="col-sm-2 control-label">最大start</label>
                        <div class="col-sm-9">
                            <div class="switch switch-small">
                                <input type="text" class="form-control" style="width: 20%;" ng-model="save_maxStart" id="save_maxStart" ng-value="collection.maxStart" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="save_allowRollback" class="col-sm-2 control-label">最大limit</label>
                        <div class="col-sm-9">
                            <div class="switch switch-small">
                                <input type="text" class="form-control" style="width: 20%;" ng-model="save_maxLimit" id="save_maxLimit" ng-value="collection.maxLimit"/>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="save_remark" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-9">
                            <textarea id="save_remark" ng-model="save_remark" class="form-control" placeholder="描述"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">集群配置</label>
                        <div class="col-sm-10">
                            <table class="table table-striped table-bordered table-hover">
                                <tr>
                                    <th style="width: 30%">名称</th>
                                    <th style="width: 40%">节点</th>
                                    <th style="width: 20%">Shard</th>
                                    <th>操作</th>
                                </tr>
                                <tr ng-repeat="replica in save_replicas">
                                    <td>
                                        <input type="text" class="form-control" ng-model="replica.coreName" ng-disabled="save_id != null" />
                                    </td>
                                    <td>
                                        <select ng-model="replica.nodeId" class="form-control" ng-disabled="save_id != null">
                                            <option ng-repeat="node in nodes" value="{{node.id}}" ng-selected="replica.nodeId == node.id">{{node.name}}</option>
                                        </select>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" ng-model="replica.shard" ng-disabled="save_id != null" />
                                    </td>
                                    <td>
                                        <a href="javascript:void(0)" ng-click="delReplica($index)">删除</a>
                                    </td>
                                </tr>
                            </table>
                            <div>
                                <a href="javascript:void(0)" ng-click="addReplica()">添加</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" ng-click="save()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- delete dialog -->
<div class="modal fade" id="removeDialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">删除确认</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">您确认要删除吗</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" ng-click="remove()" ng-disabled="saving" ng-class="{'btn-default':saving, 'btn-danger':!saving}">确认删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- reload dialog -->
<div class="modal fade" id="reloadDialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">重载确认</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">您确认要重载吗。</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" ng-click="reload()">确认重载</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- optimize dialog -->
<div class="modal fade" id="optimizeDialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">优化确认</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    优化到
                    <input type="text" ng-model="optimize_maxSegments" class="form-control" style="width: 50px;display: inline"/>
                    个段
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" ng-click="optimize()">确认优化</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>